<template>    
    <view>
		<uni-forms ref="form" :modelValue="formData" labelPosition="left" :rules="rules" style="padding: 20rpx;" validateTrigger="bind">
			<uni-forms-item label="姓名" name="name" required>
				<uni-easyinput name="name" type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email" required>
				<input class="input border rounded px-2" style="height: 70rpx;" v-model="formData.email" type="text" placeholder="请输入邮箱" @input="binddata('email',$event.detail.value)" />
			</uni-forms-item>
			<uni-forms-item label="分类" name="category" required>
				 <uni-data-picker v-model="formData.category" :localdata="categories" popup-title="请选择分类"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age" required>
				<uni-easyinput name="age" type="number" v-model="formData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="爱好" name="hobby" required>
				<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobbies"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item label="班级" name="myclass" required>
				 <uni-data-picker v-model="formData.myclass"  :localdata="classes" popup-title="请选择班级"></uni-data-picker>
			</uni-forms-item>
		</uni-forms>
		<button @click="submit" class="mx-2">Submit</button>
		
    </view>    
</template>    
<script>    
    export default {    
        data() {
			return {
				classes: [{
				  text: "一年级",
				  value: "1-0",
				  children: [{
					  text: "1.1班",value: "1-1"},
					  {text: "1.2班",value: "1-2"}]
				},
				{text: "二年级",value: "2-0"},
				{text: "三年级",value: "3-0"},
				],
				categories:[{"text":'动画',"value":1},{"text":'视频',"value":2}],
				hobbies:[{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}],
				// 表单数据
				formData: {
					name: 'dark',
					email: 'dcloud@qq.com',
					category:1,
					age:11,
					hobby:[1,2],
					myclass:'2-0',
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入{label}',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						// 当前表单域的字段中文名，可不填写
						label:'姓名',
						//表单校验时机
						//validateTrigger:'bind'
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
								required: true,
								errorMessage: '请输入邮箱',
							},{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					},
					category:{
						rules: [{
								required: true,
								errorMessage: '请选择分类',
						}]
					},
					age:{
						rules:[{
							required: true,
							errorMessage: '请输入年龄',
						},{
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (value > 10 ) {
											// 通过返回 resolve
											resolve()
										} else {
											// 不通过返回 reject(new Error('错误信息'))
											reject(new Error('年龄必须大于十岁'))
										}
									}, 1000)
								})
							}
						}]
					},
					hobby:{
						rules:[{
							required: true,
							errorMessage: '请选择爱好',
						},{
							validateFunction:function(rule,value,data,callback){
								if (value.length < 2) {
									callback('请至少勾选两个兴趣爱好')
								}
								return true
							}
						}]
					},
					myclass:{
						rules:[{
							required: true,
							errorMessage: '请选择爱好',
						}]
					}
				}
			}
        },
		methods:{
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			
			// 触发提交表单
			submit() {
				uni.showLoading({
					title:'验证中...'
				});
				this.$refs.form.validate().then(res=>{
					console.log('验证成功，form数据信息：', res);
				}).catch(err =>{
					console.log('验证失败，错误信息：', err);
				}).finally(()=> {
					uni.hideLoading();
				});
			}
		}
    }    
</script>    
<style>    

</style>